<template>
  <div class="wrap">
    <el-card class="header-card">
      <div class="item font-bold">
        <p class="font-bold">结算客户：{{data.agentNickname}}</p>
        <p class="font-bold">结算周期：{{ data.startDate }} - {{data.endDate}}</p>
        <p class="font-bold">总货柜数：{{ data.containerNum }}</p>
        <p>
          <span v-for="item in costList"
                 :key="item.id"
                class="mgr10"
          >
            {{item.costName}}：{{data['costId' + item.id]}}
          </span>
        </p>
        <p class="font-bold">总结算费用（元）：{{ data.totalFee }}</p>

      </div>
      <div class="button">
        <div>
          <el-button type="primary" @click="downLoad" :loading="downloadLoading">{{$t('data.Download settlement statement')}}</el-button>
        </div>
        <div class="mgt10">
          <el-button type="success" v-if="data.status === 0" @click="finishPayment"  :loading="btnLoading">{{$t('data.Mark settled')}}</el-button>
          <el-button type="warning" v-if="data.status === 1" @click="resetPayment" :loading="btnLoading">{{$t('data.Mark Unsettled')}}</el-button>
        </div>
      </div>
    </el-card>
    <div class="content">
      <div class="mgb10">
        货柜明细：
      </div>
      <el-table
        border
        :data="tableData"
      >
        <el-table-column
          prop="containerNo"
          label="货柜/航班号"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="item in costList"
          :key="item.id"
          :prop="'costId' + item.id"
          :label="item.costName"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            <template v-if="row['costId' + item.id] !== undefined">
              {{row['costId' + item.id]}}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="sumCostValue"
          label="总费用（元）"
          min-width="100"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="createTime"
          label="制单时间"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="installDate"
          label="装柜时间"
          min-width="150"
          align="center"
        ></el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "financeContainerInfo",
  data(){
    return {
      id: 0,
      data: {},
      tableData: [],
      loading: false,
      btnLoading: false,
      downloadLoading: false,
      costList: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    getData(){
      this.loading = true
      request({
        url: `/finance/getFinanceContainerInfo/${this.id}`
      })
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.tableData = res.info.table
          this.costList = res.info.costList
        })
    },
    finishPayment(){
      this.btnLoading = true
      request({
        url: `/finance/finishPaymentContainer/${this.id}`,
        method: 'patch',
        handleError: true
      })
        .then(res=>{
          this.btnLoading = false
          if(res.error === 0){
            this.$sMsg(res.message)
            this.getData()
          }else{
            this.$eMsg(res.message)
          }
        })
    },
    resetPayment(){
      this.btnLoading = true
      request({
        url: `/finance/settlingPaymentContainer/${this.id}`,
        method: 'patch',
        handleError: true
      })
        .then(res=>{
          this.btnLoading = false
          if(res.error === 0){
            this.$sMsg(res.message)
            this.getData()
          }else{
            this.$eMsg(res.message)
          }
        })
    },
    downLoad(){
      this.downloadLoading = true
      request({
        url: `/finance/exportFinanceContainerPayment`,
        method: 'get',
        params: {
          id: this.id
        }
      })
        .then(res=>{
          this.downloadLoading = false
          window.open(res.data.excelPath,"_blank");
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.footer{
  margin-top: 20px;
}
</style>
